import { globalStyle, style } from '@vanilla-extract/css';
import { MEDIA_MAX_WIDTH, vars, Z_INDEX } from '../../theme/vars.css';

export const progressStyle = style({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	padding: '2rem',
	position: 'fixed',
	left: '0',
	top: '0',
	right: '0',
	bottom: '0',
	zIndex: Z_INDEX.DIALOG,
	opacity: 0,
	transform: 'scale(0)',
	transition: 'opacity 0.2s, transform 0.2s',
	selectors: {
		'&.active': {
			opacity: 1,
			transform: 'scale(1)',
		},
	},
});

globalStyle(`${progressStyle}>div`, {
	outline: 'none',
	backgroundColor: vars.color.panelBackground,
	boxShadow: `1px 1px 10px ${vars.color.shadow}`,
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	justifyContent: 'center',
	borderRadius: vars.layout.middleRadius,
	padding: '4rem 3rem',
	width: '20rem',
	maxWidth: '80vw',
	'@media': {
		[MEDIA_MAX_WIDTH]: {
			paddingLeft: '2rem',
			paddingRight: '2rem',
		},
	},
});

globalStyle(`${progressStyle}>div>progress`, {
	width: 'auto',
});

globalStyle(`${progressStyle}>div>p`, {
	marginTop: '-1rem',
});
